<template name='imgsBanner'>
	<view class="imgsBannerBox">
		<swiper class="imgsBanner_swiper" :autoplay='false' :interval='Number(interval)' :duration='Number(duration)'
			:current='comCurrentImg' @change='changCurrent'>
			<swiper-item v-for="(tab,index) in imgList" :key='index'>
				<view
					style="height: 300rpx;position: relative;width:96%;height:380rpx;background-size: 100% 100%;background-repeat: no-repeat;border-radius: 20rpx;"
					:style="{backgroundImage:`url(${tab.bgImage})`}">
					<view style="position: absolute;bottom: 20rpx;width: 100%;left: 30rpx;">
						<view style="color: #fff;">{{tab.levelName}}</view>
						<view class="">
							<view style="padding: 20rpx 80rpx 20rpx 0;">
								<u-line-progress :percentage="Math.floor(tab.task[0].current/tab.task[0].number*100 )"
									activeColor=" #ff0000" inactiveColor='#fff' height='10'>
								</u-line-progress>
							</view>
							<view style="font-size: 26rpx;color: #6c7071;">
								<text
									style="font-size: 28rpx;font-weight: 650;margin-right: 10rpx;">{{tab.task[0].current}}/{{tab.task[0].number}}</text>
								{{tab.task[0].title}}{{tab.task[0].number - tab.task[0].current}}{{tab.task[0].unit}}
							</view>
						</view>
					</view>
				</view>
			</swiper-item>

		</swiper>
		<!-- 图片位置 -->
		<!-- <view class="imgLength">{{(comCurrentImg+1)+'/'+(imgList.length)}}</view>
			<scroll-view scroll-x="true" class="scrollImgBox" :scroll-left='scrollImgList' scroll-with-animation v-if="isShowSmallImgs">
				<view class="scrollImgList">
					<image :src="getItemUrl(item)" mode="aspectFill" v-for="(item,index) in imgList" :key='index' :class="comCurrentImg==index?'activeImageItem':''" @click="onClickImg(index)" :id="'item'+index"></image>
				</view>
			</scroll-view> -->
	</view>
</template>

<script>
	export default {
		name: 'imgsBanner-tag',
		props: {
			imgList: {
				type: Array,
				default: () => []
			},
			levelName: {
				type: String,
				default: ''
			},
			currentImg: {
				type: Number,
				default: 0
			},
			isShowSmallImgs: { //是否需要展示小图
				type: Boolean,
				default: true
			},
			customizeDisplayField: { //自定义展示字段
				type: String,
				default: ''
			},
			// 是否循环
			autoplay: {
				type: Boolean,
				default: false
			},
			// 自动切换时间间隔
			interval: {
				type: [Number, String],
				default: 5000
			},
			// 滑动动画时长
			duration: {
				type: [Number, String],
				default: 500
			},
		},
		data() {
			return {
				comCurrentImg: 0,
				scrollImgList: 0,
				imgLeftList: []
			};
		},
		created() {

			this.comCurrentImg = this.currentImg;


		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.imgList.forEach((i, v) => {
						let info = uni.createSelectorQuery().in(this);
						info.select("#item" + v).boundingClientRect((res) => {
							this.imgLeftList.push(res.left)
						}).exec()
					})
					this.imgListScroll(this.comCurrentImg)
				}
			});
		},
		methods: {
			getItemUrl(item) {
				let {
					customizeDisplayField
				} = this
				if (customizeDisplayField) {
					return customizeDisplayField.split('.').reduce((v, k) => v[k], item)
				} else {
					return item
				}
			},
			onClickImg(index) {
				this.comCurrentImg = index
				this.imgListScroll(index)
				console.log('111', this.comCurrentImg);
			},
			changCurrent(e) {
				this.comCurrentImg = e.target.current
				this.imgListScroll(e.target.current)
				this.$emit('change', this.imgList[e.target.current], e.target.current)
			},
			// 图片滑动
			imgListScroll(index) {
				if (index >= 2) {
					this.scrollImgList = this.imgLeftList[index - 2]
				} else {
					this.scrollImgList = 0
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.imgsBannerBox {
		position: relative;
	}

	.imgLength {
		position: absolute;
		top: 694rpx;
		right: 24rpx;
		background: rgba(0, 0, 0, 0.34);
		padding: 0 12rpx;
		line-height: 32rpx;
		font-size: 22rpx;
		border-radius: 16rpx;
		color: #fff;
	}

	.imgsBanner_swiper {
		width: 660rpx;
		height: 382rpx;
		margin-bottom: 24rpx;

		swiper-item {
			width: 600rpx;
			height: 100%;


			image {
				width: 600rpx;
				height: 750rpx;
			}
		}
	}

	.scrollImgBox {
		.scrollImgList {
			white-space: nowrap;

			image {
				width: 132rpx;
				height: 132rpx;
				margin-right: 16rpx;
				display: inline-block;
				border: 6rpx solid #fff;
			}

			image:last-child {
				margin-right: 0;
			}

			.activeImageItem {
				border: 6rpx solid #F57341;
			}
		}
	}
</style>